<template>
    <div class="classification" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <div class="header"></div>
        <div class="main">
            <div style="width: 100%;text-align: center;height: 10%;"><span style="font-size: 200%;">{{ classification }}</span></div>
            <div style="display: flex; justify-content: center; flex-wrap: wrap;width: 100%; ">
                <div style="width: 90%;">
                    <div class="video1" v-for="video in videos" :key="video.id">
                        <div  @click="router_video(video.id)" style="cursor: pointer;height: 65%;width: 100%;">
                            <el-image style="width:100%; height: 100%;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                                fit="fill"></el-image>
                        </div>
                        <div class="name">
                            <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                        </div>
                        <div style="font-size: 80%;color: #606266;">
                            <i class="el-icon-user"></i> {{ video.publisherName }} · {{ video.createTime.slice(0,10) }}
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            classification:'',//分类
            videos:[],//查询到的视频
            videos1:[],//下拉视频
            page:4,//查询分页页数
            disabled:false,//是否禁用滚轮
        }
    },
    created(){
        var _this = this
        _this.classification = this.$route.query.classification
        var videovo = {
            classification:_this.classification
        }
        VideoSearchApi.SubmitQueryAllClassifiedVideos(videovo,1,15).then(res=>{
            if(res.data.code == 200){
                _this.videos = _this.videos.concat(res.data.data.records)
            }
        })
    },
    methods:{
        //下拉出现视频
        load(){
            var _this = this
            var videovo = {
                classification:_this.classification
            }
            VideoSearchApi.SubmitQueryAllClassifiedVideos(videovo,_this.page,5).then(res=>{
                if(res.data.code==200){
                    _this.page++
                    _this.videos = _this.videos.concat(res.data.data.records)
                }else{
                    _this.disabled = true
                }
            })
        },
         //跳转到视频页面
         router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.classification{
    height: 99%;
    width: 100%;
    background-color: aliceblue;
    overflow: auto;
}
.header{
    height: 150px;
    width: 100%;
    background-image: url('../assets/image/分类背景.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.main{
    height: 80%;
    width: 100%;

}

.video1{
    margin-left: 1%;
    margin-right: 1%;
    height: 30vh;
    width: 18%;
    float: left;
}
.name {
    height: 13%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight: 600;
    font-size:smaller;
    margin-top: 5%;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
</style>